import app_logo from '@/assets/icons/logo.svg';
import { IconWrapper } from '@/components/lms-icon-wrap/index';
import { LockOutlined, UserOutlined, SafetyCertificateOutlined } from '@ricons/antd';

export function Login() {
  return (
    <div className="w-screen h-screen bg-auto bg-no-repeat bg-center bg-opacity-60 backdrop-blur-md flex items-center justify-center bg-[url('@/assets/images/login-bg.svg')]">
      <div className="w-[420px] h-80 p-6 bg-background rounded-lg shadow-lg border border-gray-200 animate-pulse-once">
        <div className="flex items-center gap-x-1">
          <img src={app_logo} width={36} height={36} className="drop-shadow-lg"></img>
          <span className='text-2xl font-semibold italic bg-gradient-primary bg-clip-text text-transparent'>欢迎登录</span>
        </div>
        <Form className='mt-6 flex flex-col gap-y-3' size='large'>
          <Form.Item noStyle>
            <Input prefix={<IconWrapper children={<UserOutlined />} />} placeholder='请输入账号/邮箱/手机号' />
          </Form.Item>
          <Form.Item noStyle>
            <Input.Password prefix={<IconWrapper children={<LockOutlined />} />} placeholder='请输入登录密码' />
          </Form.Item>
          <Form.Item noStyle >
            <div className='flex flex-row items-center gap-x-3'>
              <Input prefix={<IconWrapper children={<SafetyCertificateOutlined />} />} placeholder='请输入验证码' />
              <Button>获取验证码</Button>
            </div>
          </Form.Item>
          <Button type='primary' className='mt-3 text-white text-md' size='large'>登录</Button>
        </Form>
      </div>
    </div>
  );
}
